<template>
    <!-- 最外层只能有一个组件，不能出现多个 -->
    <div class="demo-basic-vueStudyChild-classStyleDemo">
        <div v-bind:class="{red: isRed, 'font-16': isSixteen}">
            使用 JSON 来控制class
        </div>
        <br>
        <div v-bind:class="classObj">
            使用 变量 来控制class ________________  v-bind:class="classObj"
        </div>
        <br>
        <div v-bind:class="[redClass, fontSizeClass]">
            使用 数组 来控制class _________________ v-bind:class="[redClass, fontSizeClass]"
        </div>
        <br>
        <hr>

        <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">
            使用 JSON 来控制 style
        </div>
        <br>
        <div v-bind:style="styleObject">
            使用 变量 来控制 style ________________  v-bind:style="styleObject"
        </div>
        <br>
        <div v-bind:style="[baseStyles, overridingStyles]">
            使用 数组 来控制 style _________________ v-bind:style="[baseStyles, overridingStyles]
        </div>
        <br>
        <hr>
        <!-- 显示JavaScript代码 -->
        <pre>
            <code class="javascript">
    export default {
        data: function () {
            return {
                isRed: true,
                isSixteen: true,
                redClass: 'red',
                fontSizeClass: 'font-16',
                activeColor: 'green',
                fontSize: 30,
                styleObject: {
                    color: 'blue',
                    fontSize: '13px'
                },
                baseStyles: {
                    'font-size': '18px'
                },
                overridingStyles: {
                    'background': 'yellow'
                }
            }
        },
        computed: {
            classObj: function () {
                return 'font-16 red'
            }
        }
    }
            </code>
        </pre>
        <!-- 显示HTML代码 -->
        <pre>
            <code class="html" v-text="htmlCode">
            </code>
        </pre>

        <p>
        <div>说明：</div>
        <div>
            <div>1、使用“v-on”指令</div>
            <div>2、使用“@”代替“v-on”指令</div>
        </div>
        </p>


    </div>
</template>

<script>
    import hljs from 'highlight.js'

    export default {
        // 组件被挂载的时候执行的方法
        mounted: function () {
            window.setTimeout(function () {
                $('.demo-basic-vueStudyChild-classStyleDemo pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 200);
        },
        data: function () {
            return {
                isRed: true,
                isSixteen: true,
                redClass: 'red',
                fontSizeClass: 'font-16',
                activeColor: 'green',
                fontSize: 30,
                styleObject: {
                    color: 'blue',
                    fontSize: '13px'
                },
                baseStyles: {
                    'font-size': '18px'
                },
                overridingStyles: {
                    'background': 'yellow'
                },
                htmlCode:`
        <div v-bind:class="{red: isRed, 'font-16': isSixteen}">
            使用 JSON 来控制class
        </div>
        <br>
        <div v-bind:class="classObj">
            使用 变量 来控制class ________________  v-bind:class="classObj"
        </div>
        <br>
        <div v-bind:class="[redClass, fontSizeClass]">
            使用 数组 来控制class _________________ v-bind:class="[redClass, fontSizeClass]"
        </div>
        <br>
        <hr>

        <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">
            使用 JSON 来控制 style
        </div>
        <br>
        <div v-bind:style="styleObject">
            使用 变量 来控制 style ________________  v-bind:style="styleObject"
        </div>
        <br>
        <div v-bind:style="[baseStyles, overridingStyles]">
            使用 数组 来控制 style _________________ v-bind:style="[baseStyles, overridingStyles]
        </div>
                `,
            }
        },
        computed: {
            classObj: function () {
                return 'font-16 red'
            }
        }
    }
</script>

<style scoped lang="scss">
    /***
    scoped ： 表示当前写的样式是针对当前页面的，对其他页面没有影响
    lang="scss": 表示我写的样式代码是针对SASS的，不是less等。强调，属性的值是scss
    ***/

    .red {
        color: red;
    }

    .font-16 {
        font-size: 16px;
    }


</style>


